<template>
    <div>
        <el-tree :data="pagingData" node-key="id" :props="defaultProps" highlight-current accordion
            @node-click="handleNodeClick">
        </el-tree>
    </div>
</template>

<script>
import { menuListPaging } from "@/common/api/menu";
import { QUERY } from "@/common/constant/Const";
import { isSysDef } from "@/common/utils/strUtil";
export default {
    name: "SelectedMenu",
    props: {
        menuData: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            userInfo: JSON.parse(window.sessionStorage.getItem("userInfo")),
            paging: {
                currentPage: 1,
                pageSize: 10,
            },
            pagingData: [{
                id: '',
                menuName: '主类目',
                children: []
            }],
            defaultProps: {
                children: 'children',
                label: 'menuName',
                id: 'id'
            }
        };
    },
    methods: {
        isSysDef,
        init() {
            menuListPaging({ currentPage: 1, pageSize: 100 }).then((resp) => {
                if (resp) {
                    this.pagingData[0].children = resp.data.totalList;
                }
            });
        },
        handleNodeClick(data) {
            this.$store.commit("selectedMenu", data);
        },
        reSetDef() {
            this.init();
            this.$store.commit("selectedMenu", { id: '' });
        }
    },
    computed: {},
    mounted() {
        this.init();
    },
};
</script>
<style>
/* 强制修改选中节点的背景颜色为红色 
使用 !important 来确保样式生效 */
/* .el-tree-node.is-current>.el-tree-node__content {
    background-color: red !important;
} */

.el-tree .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgb(217, 236, 255);
}
</style>